import 'package:aero_frisbee/app/model/af_block_list_model/af_block_list_model.dart';
import 'package:aero_frisbee/app/model/local_post_model/local_post_model.dart';
import 'package:aero_frisbee/app_route.dart';
import 'package:aero_frisbee/gen/assets.gen.dart';
import 'package:aero_frisbee/pages/modues/message/pages/followed/view_model/af_followed_list_view_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

import 'cell/af_home_cell.dart';
import 'view_model/af_home_view_model.dart';

class AfHomePage extends ConsumerStatefulWidget {
  const AfHomePage({super.key});
  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _AfHomePageState();
}

class _AfHomePageState extends ConsumerState<AfHomePage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;
  @override
  Widget build(BuildContext context) {
    super.build(context);
    final homePost = ref.watch(afHomePostListServiceProvider);
    final blockList = ref
        .watch(getBlockListFutureProvider)
        .maybeWhen(
          orElse: () => List<AfBlockListModel>.from([]),
          data: (data) => data,
        )
        .map((e) => e.broadcasterId ?? '')
        .toList();
    return Scaffold(
      body: homePost.maybeWhen(
        orElse: () => Container(),
        loading: () => const Center(child: CircularProgressIndicator()),
        data: (data) => _buildBody(data
            .where(
                (e) => !blockList.contains(e.cacheBind?.homeUser?.userId ?? ''))
            .toList()),
      ),
    );
  }

  _buildBody(List<LocalPostModel> data) {
    return Column(
      children: [
        AspectRatio(
          aspectRatio: 1125 / 849,
          child: Stack(
            children: [
              Assets.images.home.homeHeaderBg.image(),
              Positioned.fill(
                child: Column(
                  children: [
                    SizedBox(
                      height: MediaQuery.of(context).padding.top,
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 16),
                      height: kToolbarHeight,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Assets.images.home.homeHeaderTitle.image(height: 30),
                          GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: () {
                              context.pushNamed(RouteUri.afCreatePost);
                            },
                            child: Padding(
                              padding: const EdgeInsets.only(
                                  right: 4, top: 4, bottom: 4, left: 4),
                              child: Assets.images.home.homeHeaderCreatePostBtn
                                  .image(width: 52),
                            ),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 30,
                    ),
                    Row(
                      children: [
                        Expanded(
                          flex: 9,
                          child: Container(),
                        ),
                        Expanded(
                          flex: 233,
                          child: Stack(
                            children: [
                              Positioned.fill(
                                child:
                                    Assets.images.home.homeHeaderTipBg.image(),
                              ),
                              const AspectRatio(
                                aspectRatio: 804 / 369,
                                child: Padding(
                                  padding: EdgeInsets.only(top: 28, right: 29),
                                  child: Text(
                                    'A frisbee, also known as a flying \nsaucer or flying disk,\n is a disk-shaped device used for\n recreation and sport.',
                                    style: TextStyle(
                                      color: Color(0xff202020),
                                      fontWeight: FontWeight.w500,
                                      fontSize: 11,
                                    ),
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Expanded(
                          flex: 133,
                          child: Container(),
                        ),
                      ],
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
        Expanded(
          child: CustomScrollView(
            primary: false,
            slivers: <Widget>[
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) => AfHomeCell(
                    item: data[index],
                  ),
                  childCount: data.length,
                ),
              ),
              SliverToBoxAdapter(
                child: SizedBox(
                  height: MediaQuery.of(context).padding.bottom,
                ),
              )
            ],
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  void didUpdateWidget(AfHomePage oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }
}
